<template>
  <view class="m-guest flex align-center">
    <image class="m-guest__img" :src="getImgUrl(option.ti_icon)"></image>
    <view class="m-guest__right c333 flex column justify-center">
      <view class="fw500 font32">{{ option.ti_title }}</view>
      <view class="font20 c666 mgt20">{{ option.ti_keyword }}</view>
    </view>

    <view class="m-guest-bg"></view>
  </view>
</template>

<script>
export default {
  props: {
    option: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

<style lang="scss" scoped>
.m-guest {
  height: 200rpx;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(72, 30, 193, 0.1);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-right: 40rpx;
  background-color: white;
  position: relative;

  &-bg {
    background-image: url("https://zgq-icu-2002-1313043931.cos.ap-shanghai.myqcloud.com/yaxin%2Fzhuanjia-bg.png");
    background-size: 542rpx 200rpx;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__img {
    margin-left: 20rpx;
    align-self: flex-end;
    width: 146rpx;
    height: 192rpx;
    flex-shrink: 0;
  }

  &__right {
    padding-left: 230rpx;
    padding-right: 40rpx;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

  }
}
</style>